<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>e-Dossier</title>
<meta name="description" content="">
<meta name="author" content="">
<link href="../css/credoc-bootstrap.min.css" rel="stylesheet">

<!-- Temporary link... before merging into credoc-bootstrap.min.css -->
<link href="../css/credoc.css" rel="stylesheet">

</head>

<body style="padding-top: 42px;">

	<div class="navbar navbar-fixed-top">

		<!-- BLACK GRADIENT HEADER -->
		<div class="top-nav">
			<!-- cf. portal impl -->
			<a href="index.html"><img src="../img/logo.png" height="34"
				width="85"></a>
		</div>
		<!-- end top-nav -->

	</div>
	<!-- end navbar navbar-fixed-top -->

	<header>
		<ul class="breadcrumb" id="breadcrumb">
			<li><a href="">Dashboard</a></li>
			<span class="divider">/</span>
			<li><a href="">Search</a></li>
			<span class="divider">/</span>
			<li><a href="">Consult eDossier (ED-2013-PED758)</a></li>
			<span class="divider">/</span>
			<li><a href="">Consult Deed (D-2013-MAR589)</a></li>
		</ul>
	</header>

	<div id="sidebar-nav">

		<div class="context-header">

			<div class="row">
				<div class="span3">
					<div class="row">
						<div class="span1">
							<div class="pull-left">
								<img src="../img/icon_deed.png" height="34" width="35">
							</div>
						</div>
						<div class="span2 header">
							<div class="row">
								<div class="pull-left">
									<div class="pull-left icon-user icon-gray"></div>
									<div class="pull-left user header-text">John Doe</div>
								</div>
								<!-- end pull-left -->
							</div>
							<!-- end row -->
							<div class="row top-buffer">
								<div class="pull-left">
									<div class="pull-left icon-calendar icon-gray"></div>
									<div class="pull-left user header-text">13/03/2013</div>
								</div>
								<!-- end pull-left -->
							</div>
							<!-- end row -->
						</div>
						<!-- end span2 -->
					</div>
				</div>
			</div>

			<div class="context-title">

				<div>
					<p>
					<h6>Nam nisl turpis, fringilla eu viverra eget, ornare a erat.</h6>
					</p>
				</div>
			</div>

		</div>

		<ul id="dashboard-menu" class="nav nav-list">
			<li class="active "><a href=""><i class="icon-folder-open"></i>
					<span>Deed Info</span></a></li>
			<li class=" "><a href=""><i class="icon-home"></i> <span>Goods</span></a></li>
			<li class=" "><a href=""><i class="icon-user"></i> <span>Parties<span
						class="badge badge-info pull-right">3</span></span></a></li>
			<li class=" "><a href=""><i class="icon-list-alt"></i> <span>Documents<span
						class="badge badge-info pull-right">2</span></span></a></li>
			<li class=" "><a href=""><i class="icon-star"></i> <span>Transactions<span
						class="badge badge-info pull-right">2</span></span></a></li>
			<li class=" "><a href=""><i class="icon-envelope"></i> <span>Expeditions</span></a></li>
			<li class=" "><a href=""><i class="icon-chevron-right"></i>
					<span>References</span></a></li>
			<li class=" "><a href=""><i class="icon-time"></i> <span>History</span></a></li>
		</ul>
	</div>

	</div>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span16">
				<div class="content">

					<!-- Context page - Button Bar -->

					<div class="button-bar">
						<button class="btn btn-inverse btn-small" type="button">
							<i class="icon-plus-sign"></i> Create Expedition
						</button>
					</div>

					<!-- Context page - Content -->

					<div class="content-pane" style="height: 400px;">

						<div class="row-fluid">
							<div class="span7">
								<div class="group-title">Expeditions</div>
								<hr class="dotted">
							</div>
							<div class="btn-group pull-right" data-toggle="buttons-radio">
								<a class="btn" href="#"><i class="icon-list"></i></a> <a
									class="btn active" href="#"><i class="icon-th-large"></i></a>
							</div>
						</div>

						<div class="fluid-row">
							<div class="span12">
								<!-- TRANSACTION -->
								<div class="thumb">

									<div class="thumb-header-transaction">
										<strong>Formality: </strong> Mortgage

										<div class="pull-right" style="width: 20px;">
											<i class="icon-edit icon-large"></i>
										</div>
										<div class="pull-right" style="width: 40px;">
											<i class="icon-trash icon-large"></i>
										</div>

									</div>

									<div class="thumb-footer">
										<button id="send-btn" class="btn btn-primary btn-small"
											type="button">
											<i class="icon-envelope"></i> Sign Expedition...
										</button>
									</div>

								</div>
								<!-- end thumb -->
							</div>
						</div>
					</div>


				</div>
				<!-- end content-pane -->

				<!-- Modal -->
				<div id="delete-confirm" class="modal hide fade" tabindex="-1"
					role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div id="m-header" class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">×</button>
						<h4>Expedition Summary Preview</h4>
					</div>
					<div class="modal-body">

						<ul class="nav nav-tabs" id="preview-tab">
							<li><a href="#pdf" data-toggle="tab">PDF Preview</a></li>
							<li><a href="#summary" data-toggle="tab">Expedition
									Summary</a></li>
						</ul>

						<div id="body-content" class="tab-content">

							<!-- pdf preview -->

							<div class="tab-pane active" id="pdf">
								<div class="span6"></div>
								<!-- end span6 -->
							</div>
							<!-- end tab-pane -->


							<!-- summary preview -->
							<div class="tab-pane active" id="summary">
										<div class="span6">
											<form class="form-horizontal">
												<div class="control-group">
													<label class="control-label" for="inputEmail">Deed Reference</label>
													<div class="controls">
														<input type="text" value="Openbare verkoop, John Doe" readonly="readonly" 
															class="span12">
													</div>
												</div>

												<div class="control-group">
													<label class="control-label">Deed Date</label>
													<div class="controls">
														<input type="text" value="05/01/2013" readonly="readonly" 
															class="span12">
													</div>
												</div>

											</form>
										</div>
										<!-- end span6 -->

										<div class="span6">
											<form class="form-horizontal">
												<div class="control-group">
													<label class="control-label" for="inputEmail">Penholder</label>
													<div class="controls">
														<input type="text" value="Marie Dupont" readonly="readonly" 
															class="span12">
													</div>
												</div>

												<div class="control-group">
													<label class="control-label">Repertorium Number</label>
													<div class="controls">
														<input type="text" value="REP-2013-8596" readonly="readonly" 
															class="span12">
													</div>
												</div>
											</form>
										</div>
										<!-- end span6 -->
									
								
							</div>
							<!-- end tab-pane -->

						</div>
						<!-- end tab-content -->


					</div>
					<!-- end modal-body -->

					<div id="m-footer" class="modal-footer">
						<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
						<button class="btn btn-inverse">
							<i class="icon-trash"></i> Sign
						</button>
					</div>
				</div>

			</div>
			<!-- end span10 -->
		</div>
		<!-- end row-fluid -->
	</div>
	<!-- end container-fluid -->

	<footer>
		<div class="footer">
			<div class="container narrow row-fluid"></div>
		</div>
	</footer>

	<!-- LIBRARY -->
	<script src="../js/credoc-scripts.min.js"></script>
	<script src="../js/bootstrap-affix.js"></script>

	<script type="text/javascript">
		$('body').tooltip({
			selector : '[rel=tooltip]'
		});
	</script>

	<!-- Make sure the first pill tab is selected -->
	<script type="text/javascript">
		$('#preview-tab a:first').tab('show'); // Select first tab
	</script>

	<!--  -->
	<script type="text/javascript">
		$('#send-btn').on('click', (function(e) {
			// call confirmation modal
			$('#delete-confirm').modal({
				keyboard : true
			});
		}));

		$('#delete-confirm').on(
				'show',
				function(e) {
					var modal = $(this);

					$('.modal').css({
						'width' : function() {
							return ($(document).width() * .95) + 'px';
						},
						'height' : function() {
							return ($(document).height() * .85) + 'px';
						}
					});

					/*
					    HACK: ( ( $(document).height() * .75 ) - 180 )
					    
					    '-180' seems to work for all resolutions
					 */
					$('#body-content').css({
						'height' : function() {
							return (($(document).height() * .75) - 180) + 'px';
						}
					});

					modal.css('margin-top', (modal.outerHeight() / 2) * -1)
							.css('margin-left', (modal.outerWidth() / 2) * -1);

					return this;
				});
	</script>

	<script type="text/javascript">
		$('#send-btn').click(function() {
			console.log('Launch popup');
		});
	</script>
</body>
</html>